<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <style type="text/css">
        div#box {
            width: 100px;
            height: 100px;
            color: darkgrey;
        }
        .red{
            background-color: red;
        }
        .blue{
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="app">
    <!--class属性-->
    <button @click="isRed=!isRed">点我切换颜色</button>
    <div id="box" :class="{red: isRed,blue: !isRed}">  <!-- v-bind: 的缩写 ：-->
        我是盒子
    </div>

    <!--计算属性-->
    <h1>
        您的生日：{{birth}}<br>
        您的生日：{{birth}}<br>
        您的生日：{{birth}}<br>
    </h1>

    <!--watch-->
    <input type="text" v-model="num">
    <h1>num: {{num}}</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
   const app = new Vue({
       el:"#app", //element,vue作用的标签
       data:{
            isRed:true,
           birthday:1529032123201, //毫秒值
           num: 1,
           person:{
                name:'Jack',
                age: 21
           }
       },
       computed:{
           birth(){
               console.log(1);
               const day = new Date(this.birthday);
               return day.getFullYear() + "年" + day.getMonth() + "月" + day.getDay() + "日";
           }
       },
       watch:{
           num(val,oldVal){
               console.log(val,oldVal);
           },
           person:{
               deep:true,  // 深监控，用于对象
               handler(val){
                   console.log(val.age);
               }
           }
       }
   });
</script>
</body>
</html>